<!DOCTYPE html>
<html lang="zh-en">
<head>
    <meta charset="UTF-8">
    <title>混合mixins</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script></script>
</head>
<body>
    <!-- 下面两个都是有隐藏和显示的功能 这里的mixins目的就是因为两个元素都会用到show 和 hide 所以这里就要用到mixins -->
<div id="app">
    <tooltip></tooltip>
    <popup></popup>
</div>
<script>
    var base={
    methods: {
       show: function () {
           this.visible=true;
       } ,
        hide: function () {
            this.visible=false;
        },
        toggle: function () {
            this.visible=!this.visible;
        }
},
    data: function () {
        return {
            visible:false,
        }
    }
};
Vue.component('tooltip',{
    template: `
    <div>
        <span @mouseenter="show" @mouseleave="hide">bys</span>
        <div v-if="visible">
            白岩松
        </div>
    </div>
    `,
    mixins: [base],
    // data: function () {
    //     return {
    //         visible: true,  //当你想自己把这个东西会把base中的东西覆盖掉，执行这一个
    //     }
    // }
})
Vue.component('popup',{
    template: `
    <div>
        <button @click="toggle">Popup</button>
            <div v-if="visible">
                <span @click="hide">X</span>
                 <h4>title</h4>
                 Lorem ipsum dolor sit amet,consectetur adipisicing<br>
                 Lorem ipsum dolor sit amet,consectetur adipisicing<br>
                 Lorem ipsum dolor sit amet,consectetur adipisicing<br>
                 Lorem ipsum dolor sit amet,consectetur adipisicing<br>
                 Lorem ipsum dolor sit amet,consectetur adipisicing<br>
                 Lorem ipsum dolor sit amet,consectetur adipisicing<br>
                 Lorem ipsum dolor sit amet,consectetur adipisicing<br>
                 Lorem ipsum dolor sit amet,consectetur adipisicing<br>
                 Lorem ipsum dolor sit amet,consectetur adipisicing<br>
                 Lorem ipsum dolor sit amet,consectetur adipisicing<br>
                 Lorem ipsum dolor sit amet,consectetur adipisicing<br>
               
            </div>
    </div>
    `,
    mixins: [base]

})
new Vue({
    el: '#app',
    data: {

    }
})
</script>


</body>
</html>